<template>
  <div class="dormitory-operation-log">
    <h2>宿舍操作日志</h2>
    <ul>
      <li v-for="log in logs" :key="log.id">
        <span class="id">操作信息NO.{{ log.id }}</span>
        <span class="timestamp">在{{ log.timestamp }}:</span>
        <span class="name">{{ log.name }}对</span>
        <span class="dormitory">{{ log.dormitory }}进行</span>
        <span class="operation">{{ log.operation }}</span>
        <span class="Handle">【{{ log.Handle }}】操作，</span>
        <span class="status">{{ log.status }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'DormitoryOperationLog',
  data() {
    return {
      logs: [
        {
          id: 1,
          name: '张三',
          timestamp: '2023-04-01 12:00:00',
          dormitory: '宿舍A',
          Handle: '充值',
          operation: '热水',
          status: '成功'
        },
        {
          id: 2,
          name: '李四',
          timestamp: '2023-04-01 12:05:00',
          dormitory: '宿舍B',
          Handle: '分析表数据',
          operation: '冷水',
          status: '失败'
        }
        // 更多操作日志数据
      ]
    }
  }
}
</script>

<style scoped>
.dormitory-operation-log {
  background-color: #f4f4f4;
  width: 93%;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.dormitory-operation-log h2 {
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

.dormitory-operation-log ul {
  list-style: none;
  padding: 0;
}

.dormitory-operation-log li {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
}

.timestamp {
  color: #666;
}
.id {
  flex-basis: 20%;
}
.Handle {
  color: blue;
}
.dormitory {
  color: #333;
  flex-basis: 12%;
}

.operation {
  color: #333;
}

.status {
  color: red;
}
</style>
